<script setup>
import searchBar from '@/components/searchBar.vue'
import House from "@/components/Nav/zhuye.vue"
import Money from "@/components/Nav/dashang.vue"
import Setting from "@/components/Nav/shezhi.vue"
import Chat from "@/components/Nav/chat.vue";
import Avatar from "@/components/Nav/avatar.vue";
import {useScroll} from '@vueuse/core'
const props = defineProps({
  parallax_show: {
    type: Boolean,
    default: false
  }
})
const {y} = useScroll(window)
</script>

<template>
  <div class="nav" :class="{ show: y > 70 }" v-if="parallax_show===false">
    <div class="container flex items-center justify-between mx-auto p-4">
      <a href="/instruction" class="brand flex items-center">
        <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="iReader Logo" />
        <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">iReader-team10</span>
      </a>
      <div class="flex items-center space-x-4">
        <div class="search-bar">
          <search-bar></search-bar>
        </div>
        <button type="button" data-dropdown-toggle="language-dropdown-menu"
          class="inline-flex items-center font-medium justify-center px-4 py-2 text-sm text-gray-900 dark:text-white rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white">
        </button>
        <div class="personal-page flex items-center space-x-4">
          <div class="icon">
            <div class="avatar">
              <avatar></avatar>
            </div>
            <div class="house">
              <House></House>
            </div>
            <div class="setting">
              <Setting></Setting>
            </div>
            <div class="money">
              <Money></Money>
            </div>
            <div class="Chat">
              <Chat></Chat>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="nav1" :class="{ show1: y > 100 }" v-if="parallax_show===true">
    <div class="container flex items-center justify-between mx-auto p-4">
      <a href="/instruction" class="brand flex items-center">
        <img src="https://flowbite.com/docs/images/logo.svg" class="h-8" alt="iReader Logo" />
        <span v-if="y > 100" class="self-center text-2xl font-semibold whitespace-nowrap text-black">
          iReader-team10
        </span>
        <span v-else class="self-center text-2xl font-semibold whitespace-nowrap text-white">
          iReader-team10
        </span>
      </a>
      <div class="flex items-center space-x-4">
        <div class="search-bar">
          <search-bar></search-bar>
        </div>
        <button type="button" data-dropdown-toggle="language-dropdown-menu"
          class="inline-flex items-center font-medium justify-center px-4 py-2 text-sm text-gray-900 dark:text-white rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white">
        </button>
        <div class="personal-page flex items-center space-x-4">
          <div class="icon">
            <div class="avatar">
              <avatar></avatar>
            </div>
            <div class="house">
              <House :iconColor="y > 150 ? 'black' : 'white'"></House>
            </div>
            <div class="setting">
              <Setting :iconColor="y > 150 ? 'black' : 'white'"></Setting>
            </div>
            <div class="money">
              <Money :iconColor="y > 150 ? 'black' : 'white'"></Money>
            </div>
            <div class="Chat">
              <Chat :iconColor="y > 150 ? 'black' : 'white'"></Chat>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
body {
  margin: 0;
  padding: 0;
}

.nav {
  top:0;
  left:0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background-image: linear-gradient(to right, #fdf5f5, #ffdbdf, #fdf5f5);
  border-bottom: 1px solid #e4e4e4;
}
.nav1 {
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #e4e4e4;
  color: white
}

.container {
  max-width: 1200px;
  width: 100%;
}

.brand {
  display: flex;
  align-items: center;
}

.search-bar {
  display: flex;
  margin-left: -20px;
}

.show {
  width: 100%;
  z-index: 100;
  position: fixed;
  transition: all 0.3s linear;
  transform: none;
  opacity: 1;
  height: 80px;
  background-image: linear-gradient(to right, #fdf5f5, #ffdbdf, #fdf5f5);
  border-bottom: 1px solid #e4e4e4;
}

.show1 {
  width: 100%;
  z-index: 100;
  position: fixed;
  transition: all 0.3s linear;
  transform: none;
  opacity: 1;
  height: 80px;
  background-image: linear-gradient(to right, #fdf5f5, #ffdbdf, #fdf5f5);
  border-bottom: 1px solid #e4e4e4;
  color: black
}
.icon{
  margin: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-items: center;
  justify-content: space-between;
}
.avatar {
  margin: 0 10px;
}

.money {
  margin: 0 10px;
}

.setting {
  margin: 0 10px;
}

.Chat {
  margin: 0 10px;
}

.house {
  margin: 0 10px;
}
</style>